<template>
  <div>
    <Loading :loading="loading">
      <van-sticky v-if="!isWeChatBrowser">
        <div class="my-nav-content">
          <div>我的</div>
          <div class="my-nav-right-img flex-row flex-align-center">
            <div @click="$router.push('./msg')">
              <van-badge :dot="count !== 0">
                <img src="./img/ring.png" class="dotRing" />
              </van-badge>
            </div>
            <div @click="$router.push({ path: '/setting' })">
              <img src="./img/setting.png" class="setting" />
            </div>
          </div>
        </div>
      </van-sticky>
      <div class="my-nav-content" v-if="isWeChatBrowser">
        <div class="my-nav-right-img flex-row flex-align-center">
          <div @click="$router.push('./msg')">
            <van-badge :dot="count !== 0">
              <img src="./img/ring.png" class="dotRing" />
            </van-badge>
          </div>
          <div @click="$router.push({ path: '/setting' })">
            <img src="./img/setting.png" class="setting" />
          </div>
        </div>
      </div>
      <!-- 头部：头像、累计 -->
      <div class="my-header-content">
        <div
          class="flex-row flex-align-center"
          @click="$router.push({ path: '/myInfo' })"
        >
          <div>
            <img class="my-header-content-img" :src="image" />
          </div>
          <div class="my-header-content-text">{{ name }}</div>
        </div>
        <div
          class="my-header-content-info flex-row flex-align-center flex-justify-between"
          @click="$router.push({ path: '/revenue' })"
        >
          <div class="my-header-content-info-item">
            <div class="my-header-content-info-item-top">
              {{ personInfo.totalCount }}
            </div>
            <div class="my-header-content-info-item-text">累计件数(件)</div>
          </div>
          <div class="my-header-content-info-item">
            <div class="my-header-content-info-item-top">
              {{ personInfo.totalAnnualPrem }}
            </div>
            <div class="my-header-content-info-item-text">累计保费(件)</div>
          </div>
          <div class="my-header-content-info-item">
            <div class="my-header-content-info-item-top">
              {{ personInfo.income }}
            </div>
            <div class="my-header-content-info-item-text">预估收入(元)</div>
          </div>
        </div>
      </div>
      <div class="my-main2">
        <div class="my-main-list">
          <van-cell
            class="my-main-list-item2"
            is-link
            center
            v-for="item in menuList"
            :key="item.index"
            @click="handleMenu(item)"
          >
            <template #title>
              <div class="flex-row flex-align-center">
                <img :src="item.icon" class="my-main-list-item2-img" />
                <span>{{ item.label }}</span>
              </div>
            </template>
            <template #right-icon>
              <div v-if="item.isCall" @click="show = true">
                <div class="my-main-list-item2-phone">{{ concatUs.tel }}</div>
                <div class="my-main-list-item2-worktime">
                  工作日{{ concatUs.workTime }}
                </div>
              </div>
              <van-icon name="arrow" />
            </template>
          </van-cell>
          <van-overlay :show="show">
            <div class="wrapper">
              <div class="bottom1">
                <van-icon name="phone-o" size="18px" class="icon" />
                <a class="a" @click="callPhone">呼叫{{ concatUs.tel }}</a>
              </div>

              <div class="bottom2" @click="show = false">取消</div>
            </div>
          </van-overlay>
        </div>
      </div>
    </Loading>
  </div>
</template>
<script>
import API from '@/services/h5/my'
import homeAPI from '@/services/h5/home'
import Loading from '@/components/data-loading'
// import { hidden } from '@/utils/public/hidden.js'
import { concatUs } from '@/config/h5'
import { isWeChatBrowser } from '@/config/h5/index.js'
import { mapState, mapMutations } from 'vuex'
export default {
  components: { Loading },
  data() {
    return {
      show: false,
      concatUs,
      isWeChatBrowser,
      name: '',
      image: null,
      count: 0,
      personInfo: {},
      menuList: [
        {
          icon: require('./img/order.png'),
          label: '我的订单',
          path: '/myorder',
          isCall: false
        },
        {
          icon: require('./img/claims.jpg'),
          label: '我的理赔',
          path: '/claims',
          isCall: false
        },
        {
          icon: require('./img/customer.png'),
          label: '客户管理',
          path: '/customer',
          isCall: false
        },
        {
          icon: require('./img/help.png'),
          label: '帮助中心',
          path: '/help',
          isCall: false
        },
        {
          icon: require('./img/join.png'),
          label: '加入万利',
          path: '/joinUs',
          isCall: false
        },
        {
          icon: require('./img/call.png'),
          label: '联系我们',
          isCall: true
        }
      ]
    }
  },
  computed: {
    ...mapState('loading', ['loading'])
  },
  methods: {
    ...mapMutations('loading', ['setLoading']),
    handleMenu(item) {
      if (item.isCall) return
      this.$router.push({
        path: item.path
      })
    },
    callPhone() {
      var str = 'tel://'
      var str2 = str.concat(this.concatUs.tel)
      window.location.href = str2
    },
    async getIncome() {
      let res = await API.income()
      if (res.data && res.data.code === 1000) {
        this.personInfo = res.data.data
      }
    },
    async getPersonal() {
      let res = await API.personal()
      if (res.data && res.data.code === 1000) {
        // this.name = hidden(res.data.data.name, 0, 1)
        this.name =res.data.data.name
        this.image = res.data.data.image
      }
    },
    async getMsg() {
      let res = await homeAPI.getMsg()
      let count = 0
      res.data.data &&
        res.data.data.map(item => {
          // 我的消息和平台消息
          if (item.messageType === '01' || item.messageType === '03') {
            count = count + item.unreadCount
          }
        })
      this.count = count
    }
  },
  async created() {
    this.setLoading(true)
    this.getIncome()
    this.getPersonal()
    this.getMsg()
    setTimeout(() => {
      this.setLoading(false)
    }, 1000)
  }
}
</script>
<style scoped lang="less">
/deep/.my-nav-content .van-badge--fixed {
  top: 3px;
  right: 3px;
}
.my-nav-content {
  background: #fff4e8;
  font-size: 18px;
  color: #333;
  padding: 15px;
  text-align: center;
}
.my-nav-right-img {
  position: absolute;
  right: 15px;
  top: 15px;
  div {
    text-align: center;
  }
  div:last-child {
    margin-left: 10px;
  }
  .dotRing {
    width: 17px;
    height: 21px;
  }
  .setting {
    width: 23.5px;
    height: 23.5px;
  }
}
.my-header-content {
  background: linear-gradient(#fff4e8, #fafafa);
  box-sizing: border-box;
  width: 375px;
  padding: 15px;
  &-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
  }
  &-text {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-left: 18px;
  }
  &-info {
    margin-top: 20px;
    padding: 0 15px;
    text-align: center;
    &-item-top {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    &-item-text {
      font-size: 12px;
      color: #999;
    }
  }
}
.my-main {
  background: #fff;
  padding: 0 15px 15px 15px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  .my-main-list-item {
    display: inline-block;
    width: 114px;
    margin-top: 20px;
  }
  .my-main-list-item-img-out {
    text-align: center;
  }
  .my-main-list-item-img {
    width: 55px;
    height: 55px;
    text-align: center;
  }
  .my-main-list-item-text {
    text-align: center;
  }
}
.my-main2 {
  margin-top: 20px;
  .my-main-list-item2 {
    height: 54px;
    margin-bottom: 13px;
    font-size: 16px;
    color: #333;
    &-img {
      width: 28px;
      height: 28px;
    }
    span {
      margin-left: 10px;
    }
    &-phone {
      font-size: 14px;
      color: #666;
      text-align: right;
    }
    &-worktime {
      font-size: 14px;
      color: #999;
      margin-top: -6px;
    }
  }
  .wrapper {
    height: 100%;
    position: relative;
  }
  .bottom1 {
    position: absolute;
    bottom: 135px;
    width: 345px;
    height: 40px;
    line-height: 40px;
    margin: 0 15px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
  }
  .bottom2 {
    position: absolute;
    bottom: 80px;
    width: 345px;
    height: 40px;
    line-height: 40px;
    margin: 0 15px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    color: #38a3ff;
  }
  .icon {
    margin-right: 10px;
  }
  .a {
    color: #38a3ff;
  }
}
.c-d47zmb {
  margin-right: 10px;
  font-size: 14px;
}
</style>
